<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="700" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.lineWidth = 1.5;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 8) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // Helper function to draw a dashed line
        function drawDashedLine(ctx, x1, y1, x2, y2, dashArray = [5, 5]) {
            ctx.save();
            ctx.setLineDash(dashArray);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.restore();
        }
        
        // --- Diagram (a) ---
        
        const b = 90;
        const l = 180;
        const startX_a = 80;
        const startY_a = 100;
        
        // Draw the long straight wire (dashed line)
        drawDashedLine(ctx, startX_a, startY_a - 40, startX_a, startY_a + l + 40);

        // Draw the rectangle coil
        ctx.strokeRect(startX_a + b, startY_a, b, l);

        // Draw dimension lines and labels for (a)
        ctx.font = 'italic 20px Times New Roman';

        // Horizontal dimension 'b' (distance from wire)
        const dimY_a = startY_a - 30;
        const ext_len = 10;
        ctx.beginPath();
        ctx.moveTo(startX_a, dimY_a - ext_len);
        ctx.lineTo(startX_a, dimY_a);
        ctx.moveTo(startX_a + b, dimY_a - ext_len);
        ctx.lineTo(startX_a + b, dimY_a);
        ctx.stroke();
        drawArrow(ctx, startX_a + b/2, dimY_a, startX_a, dimY_a);
        drawArrow(ctx, startX_a + b/2, dimY_a, startX_a + b, dimY_a);
        ctx.fillText('b', startX_a + b / 2, dimY_a - 15);

        // Horizontal dimension 'b' (width of coil)
        ctx.beginPath();
        ctx.moveTo(startX_a + b, dimY_a - ext_len);
        ctx.lineTo(startX_a + b, dimY_a);
        ctx.moveTo(startX_a + 2*b, dimY_a - ext_len);
        ctx.lineTo(startX_a + 2*b, dimY_a);
        ctx.stroke();
        drawArrow(ctx, startX_a + 1.5 * b, dimY_a, startX_a + b, dimY_a);
        drawArrow(ctx, startX_a + 1.5 * b, dimY_a, startX_a + 2 * b, dimY_a);
        ctx.fillText('b', startX_a + 1.5 * b, dimY_a - 15);

        // Vertical dimension 'l'
        const dimX_a = startX_a + 2 * b + 30;
        ctx.beginPath();
        ctx.moveTo(dimX_a - ext_len, startY_a);
        ctx.lineTo(dimX_a, startY_a);
        ctx.moveTo(dimX_a - ext_len, startY_a + l);
        ctx.lineTo(dimX_a, startY_a + l);
        ctx.stroke();
        drawArrow(ctx, dimX_a, startY_a + l / 2, dimX_a, startY_a);
        drawArrow(ctx, dimX_a, startY_a + l / 2, dimX_a, startY_a + l);
        ctx.fillText('l', dimX_a + 15, startY_a + l / 2);

        // Label for (a)
        ctx.font = '20px Arial';
        ctx.fillText('(a)', startX_a + 1.5 * b, startY_a + l + 40);

        // --- Diagram (b) ---
        
        const startX_b_center = 450;
        const startY_b = 100;
        
        // Draw the long straight wire (dashed line)
        drawDashedLine(ctx, startX_b_center, startY_b - 40, startX_b_center, startY_b + l + 40);

        // Draw the rectangle coil
        ctx.strokeRect(startX_b_center - b / 2, startY_b, b, l);

        // Draw dimension lines and labels for (b)
        ctx.font = 'italic 20px Times New Roman';

        // Horizontal dimension 'b/2'
        const dimY_b = startY_b - 30;
        ctx.beginPath();
        ctx.moveTo(startX_b_center, dimY_b - ext_len);
        ctx.lineTo(startX_b_center, dimY_b);
        ctx.moveTo(startX_b_center + b/2, dimY_b - ext_len);
        ctx.lineTo(startX_b_center + b/2, dimY_b);
        ctx.stroke();
        drawArrow(ctx, startX_b_center + b / 4, dimY_b, startX_b_center, dimY_b);
        drawArrow(ctx, startX_b_center + b / 4, dimY_b, startX_b_center + b / 2, dimY_b);
        // Draw fraction b/2
        ctx.fillText('b', startX_b_center + b / 4, dimY_b - 20);
        ctx.beginPath();
        ctx.moveTo(startX_b_center + b / 4 - 8, dimY_b - 12);
        ctx.lineTo(startX_b_center + b / 4 + 8, dimY_b - 12);
        ctx.stroke();
        ctx.fillText('2', startX_b_center + b / 4, dimY_b - 5);


        // Vertical dimension 'l'
        const dimX_b = startX_b_center + b / 2 + 30;
        ctx.beginPath();
        ctx.moveTo(dimX_b - ext_len, startY_b);
        ctx.lineTo(dimX_b, startY_b);
        ctx.moveTo(dimX_b - ext_len, startY_b + l);
        ctx.lineTo(dimX_b, startY_b + l);
        ctx.stroke();
        drawArrow(ctx, dimX_b, startY_b + l / 2, dimX_b, startY_b);
        drawArrow(ctx, dimX_b, startY_b + l / 2, dimX_b, startY_b + l);
        ctx.fillText('l', dimX_b + 15, startY_b + l / 2);

        // Label for (b)
        ctx.font = '20px Arial';
        ctx.fillText('(b)', startX_b_center, startY_b + l + 40);

        // --- Main Caption ---
        ctx.font = '22px KaiTi'; // A common font for Chinese characters
        ctx.fillText('习题 9-24 图', canvas.width / 2, canvas.height - 50);

    </script>
</body>
</html>